<template>
  <Maptalks :mapOnLoadCB="mapOnLoadCB"></Maptalks>
</template>

<script>
import Maptalks from "@/components/common/Maptalks.component.vue"
import MapLayerConst from "@/const/MapLayerConst"

export default {
  name: "AddMarkerInfowindow.component",
  components: {Maptalks},
  setup() {

    let mapOnLoadCB = (map) => {

      let layer = new maptalks.VectorLayer(MapLayerConst.MAP_INFO_WINDOW_LAYER).addTo(map);

      let marker = new maptalks.Marker(map.getCenter()).addTo(layer);

      marker.setInfoWindow({
        'custom': true,
        'content': `
                    <div class="info-window-content">
                        <div class="pop_time">Custom InfoWindow ${new Date().toLocaleTimeString()}</div>
                        <div class="arrow"></div>
                    </div>
                `
      });

      marker.on("mouseover", () => {
        marker.openInfoWindow();
      })

      marker.on("mouseout", () => {
        marker.closeInfoWindow();
      })
    };

    return {
      mapOnLoadCB
    }
  }
}
</script>

<style lang="less">
.info-window-content {
  color: #fff;
  width: 300px;
  height: 35px;
  background-color: #051127;
  border: 1px solid #0c2c45;

  .pop_time {
    height: 35px;
    margin: 0 10px;
    line-height: 35px
  }

  .arrow {
    display: block;
    border-top: 10px solid #162259;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -10px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
  }
}
</style>
